<template>
  <view class="tab-bar">
    <slot></slot>
  </view>
</template>

<script lang="ts">
import { isUndefined } from "@/utils/is";
import { computed, defineComponent, provide, reactive, ref } from "vue";
import context from "./context";
export default defineComponent({
  props: {
    active: {
      type: Number,
      default: 0,
    },
    defaultActiveKey: {
      type: Number,
      default: void 0,
    },
  },
  emits: ["update:active"],
  setup(props, { emit }) {
    const indexList: number[] = [];
    const _activeKey = ref(props.defaultActiveKey);
    const computedActiveKey = computed(() => {
      let _a;
      const activeKey = (_a = props.active) != null ? _a : _activeKey.value;
      if (isUndefined(activeKey)) {
        return 0;
      }
      return activeKey;
    });

    function handleEvent(eventData: number) {
      console.log(eventData, "我是proxy??");
      emit("update:active", eventData);
      // 处理事件
    }
    function addkey(params: number) {
      indexList.push(params);
    }

    function getIindex(params: number): number {
      return indexList.findIndex((item) => {
        return item === params;
      });
    }

    provide(
      context.tabbarsInjectionKey,
      reactive({
        activeKey: computedActiveKey,
        handleEvent,
        addkey,
        getIindex,
      }),
    );

    return {
      computedActiveKey,
      handleEvent,
    };
  },
});
</script>

<style lang="scss" scoped>
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  height: 60px;
  background: white;
  //   box-shadow: 0 -4px 16px 0 #00000014;
  z-index: 10000;
  display: flex;
  justify-content: space-between;
  /* 毛玻璃 高斯模糊 */
  /* 设置一个半透明的背景色，可选 */
  background-color: rgba(255, 255, 255, 0.1);

  /* 应用模糊效果 */
  backdrop-filter: blur(10px);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2rpx;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 48rpx;
  height: 48rpx;
}

.tab-bar-item cover-view {
  font-size: 20rpx;
}
</style>
